import { useCallback, useEffect, useState } from "react";

export function useWinsize() {
  // 窗口宽度的初始值
  const [size, setSize] = useState({
    width: document.documentElement.clientWidth,
    heiht: document.documentElement.clientHeight
  });

  // 修改值
  const onResize = useCallback(()=>{
    setSize({
      width: document.documentElement.clientWidth,
      heiht: document.documentElement.clientHeight,
    })
  },[])

  // 页面重绘时，执行函数
  useEffect(()=>{
    window.addEventListener("resize",onResize)
    return ()=>{
      window.removeEventListener("resize",onResize)
    }
  },[])

  return size
}

